<template>
  <div class="safety box bg">
    <div
      :class="[
        'container clmcenter animate__animated',
        hide ? 'animate__fadeOut' : '',
      ]"
    >
      <div class="titlebox">
        <p class="title">-安全提示-</p>
        <p class="tips">实验区域个人安全防护要求</p>
      </div>
      <div class="content clmcenter">
        <div class="personbox">
          <img src="../../assets/img/safety/person.gif" class="person" />
          <div class="pitem p1">
            <div class="pdesc animate__animated bigIn">
              <img src="../../assets/img/safety/s1.png" class="simg" />
              <p>防护眼镜</p>
            </div>
            <img src="../../assets/img/safety/l1.gif" class="limg" />
          </div>
          <div class="pitem p2">
            <div class="pdesc animate__animated bigIn">
              <img src="../../assets/img/safety/s2.png" class="simg" />
              <p>手套<br />（如需）</p>
            </div>
            <img src="../../assets/img/safety/l2.gif" class="limg" v-if="s3" />
          </div>
          <div class="pitem p3">
            <div class="pdesc animate__animated bigIn">
              <img src="../../assets/img/safety/s3.png" class="simg" />
              <p>安全鞋</p>
            </div>
            <img
              src="../../assets/img/safety/l3.gif"
              class="limg"
              v-show="s5"
            />
          </div>
          <div class="pitem p4">
            <div class="pdesc animate__animated bigIn">
              <img src="../../assets/img/safety/s4.png" class="simg" />
              <p>呼吸面罩<br />（如需）</p>
            </div>
            <img
              src="../../assets/img/safety/l4.gif"
              class="limg"
              v-show="s2"
            />
          </div>
          <div class="pitem p5">
            <div class="pdesc animate__animated bigIn">
              <img src="../../assets/img/safety/s5.png" class="simg" />
              <p>实验服</p>
            </div>
            <img
              src="../../assets/img/safety/l5.gif"
              class="limg"
              v-show="s4"
            />
          </div>
        </div>
        <img src="../../assets/img/safety/person_shadow.png" class="shadow" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      s2: false,
      s3: false,
      s4: false,
      s5: false,
      hide: false,
    };
  },
  mounted() {
    let i = 0;
    const timer = setInterval(() => {
      this["s" + (i + 2)] = true;
      i++;
      if (i >= 4) {
        clearInterval(timer);
      }
    }, 1500);
    const t2 = setTimeout(() => {
      this.hide = true;
      const t3 = setTimeout(() => {
        this.$router.replace({ path: "/cn/map", query: { times: 0 } });
        clearTimeout(t2);
        clearTimeout(t3);
      }, 1000);
    }, 8000);
  },
};
</script>
<style lang="less" scoped>
.safety {
  .container {
    .titlebox {
      color: #004d91;
      text-align: center;
      .title {
        font-size: 3rem;
      }
      .tips {
        font-weight: 500;
        font-size: 2rem;
      }
    }
    .content {
      position: relative;
      margin-top: 2rem;
      width: 581px;
      height: 853px;
      border-radius: 2rem;
      background: rgba(0, 77, 145, 0.15);
      .personbox {
        position: relative;
        z-index: 2;
        width: 58%;
        .person {
          width: 100%;
        }
        .pitem {
          position: absolute;
          .pdesc {
            p {
              font-size: 1.5rem;
              padding-top: 0.5rem;
              font-weight: 500;
              text-align: center;
            }
            .simg{
              width: 93px;
              height: 93px;
            }
          }
          .limg {
            position: absolute;
          }
        }
        .p1 {
          top: 0;
          left: 0.5rem;
          .pdesc {
            animation-delay: 0.5s;
          }
          .limg {
            width: 44px;
            top: 3.5rem;
            left: 5.8rem;
          }
        }
        .p2 {
          left: -5.5rem;
          top: 11.8rem;
          .pdesc {
            animation-delay: 3.5s;
          }
          .limg {
            width: 57px;
            left: 5.5rem;
            top: 3rem;
          }
        }
        .p3 {
          bottom: 3rem;
          left: -3rem;
          .pdesc {
            animation-delay: 6.5s;
          }
          .limg {
            width: 63px;
            left: 5.5rem;
            top: 2.5rem;
          }
        }
        .p4 {
          top: 3rem;
          right: -2rem;
          .pdesc {
            animation-delay: 2s;
          }
          .limg {
            width: 73px;
            left: -4.4rem;
            top: 3rem;
          }
        }
        .p5 {
          bottom: 10rem;
          right: -4rem;
          .pdesc {
            animation-delay: 5s;
          }
          .limg {
            width: 111px;
            left: -6.5rem;
            top: 4rem;
          }
        }
        @-webkit-keyframes bigIn {
          from {
            opacity: 0;
          }
          50% {
            opacity: 1;
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
          }
          100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
          }
        }
        @keyframes bigIn {
          from {
            opacity: 0;
          }
          50% {
            opacity: 1;
            -webkit-transform: scale3d(1.2, 1.2, 1.2);
            transform: scale3d(1.2, 1.2, 1.2);
          }
          100% {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
          }
        }
        .bigIn {
          -webkit-animation-name: bigIn;
          animation-name: bigIn;
          -webkit-animation-duration: 1.5s;
          animation-duration: 1.5s;
        }
      }
      .shadow {
        margin-top: -4rem;
      }
    }
  }
}
@media only screen and (min-height: 1300px) {
  .safety {
    .container {
      .content {
        margin-top: 3rem;
        margin-bottom: 2rem;
      }
    }
  }
}
</style>
